
// 定义技术名称数组，用于随机显示在气泡上
const techNames = [
	'JavaScript', 'Python', 'Java', 'C++', 'PHP', 'Go', 'Rust', 'TypeScript',
	'HTML', 'CSS', 'JSON', 'XML', 'SQL', 'React', 'Vue', 'Angular',
	'Node.js', 'Express', 'MongoDB', 'MySQL', 'PostgreSQL',
	'Docker', 'Kubernetes', 'Git', 'AWS', 'Azure', 'GCP',
	'AI', 'Machine Learning', 'Deep Learning', 'Neural Network',
	'DeepSeek', 'Qwen', 'ChatGLM', 'MiniCPM'
];

// 获取气泡容器
const bubblesContainer = document.getElementById('bubblesContainer');
const addBubbleBtn = document.getElementById('addBubbleBtn');
const clearBubblesBtn = document.getElementById('clearBubblesBtn');

// 存储当前气泡的位置信息，用于避免重叠
let bubblePositions = [];

// 防抖函数
function debounce(func, wait) {
	let timeout;
	return function executedFunction(...args) {
		const later = () => {
			clearTimeout(timeout);
			func(...args);
		};
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
	};
}

/**
 * 创建单个气泡
 */
function createBubble() {
	const bubble = document.createElement('div');
	bubble.classList.add('bubble');

	// 随机选择技术名称
	const techName = techNames[Math.floor(Math.random() * techNames.length)];

	// 根据文字长度计算最小气泡尺寸
	const minSize = Math.max(parseInt(getComputedStyle(document.documentElement)
		.getPropertyValue('--bubble-min-size')), techName.length * 10);
	const maxSize = parseInt(getComputedStyle(document.documentElement)
		.getPropertyValue('--bubble-max-size'));

	// 随机生成气泡的尺寸
	const size = Math.random() * (maxSize - minSize) + minSize;
	bubble.style.width = `${size}px`;
	bubble.style.height = `${size}px`;

	// 设置气泡的文字内容
	bubble.textContent = techName;

	// 根据气泡大小调整字体大小
	const fontSize = Math.max(12, Math.min(size / 5, 20));
	bubble.style.fontSize = `${fontSize}px`;

	// 随机选择动画方向（向下或向上）
	const direction = Math.random() > 0.5 ? 'down' : 'up';
	bubble.style.animationName = direction === 'down' ? 'moveDown' : 'moveUp';

	// 随机生成气泡动画的持续时间
	const minDuration = parseInt(getComputedStyle(document.documentElement)
		.getPropertyValue('--animation-duration-min'));
	const maxDuration = parseInt(getComputedStyle(document.documentElement)
		.getPropertyValue('--animation-duration-max'));
	const animationDuration = Math.random() * (maxDuration - minDuration) + minDuration;
	bubble.style.animationDuration = `${animationDuration}s`;

	// 随机生成气泡动画的延迟时间
	bubble.style.animationDelay = `-${Math.random() * 40}s`;

	// 设置动画为无限循环
	bubble.style.animationIterationCount = 'infinite';
	// 设置动画为线性运动
	bubble.style.animationTimingFunction = 'ease-in-out';

	// 设置气泡位置，避免重叠
	const position = getNonOverlappingPosition(size);
	bubble.style.left = `${position.x}%`;
	bubble.style.top = `${position.y}%`;

	// 添加点击事件
	bubble.addEventListener('click', handleBubbleClick);

	// 将气泡添加到容器
	bubblesContainer.appendChild(bubble);

	// 记录气泡位置
	bubblePositions.push({
		x: position.x,
		y: position.y,
		size: size
	});

	return bubble;
}

/**
 * 获取不重叠的位置
 */
function getNonOverlappingPosition(size) {
	const maxAttempts = 50; // 最大尝试次数
	let attempts = 0;

	while (attempts < maxAttempts) {
		// 随机位置，但避免太靠近边缘
		const x = Math.random() * 80 + 10; // 10% 到 90%
		const y = Math.random() * 80 + 10; // 10% 到 90%

		// 检查是否与现有气泡重叠
		let overlapping = false;
		for (const pos of bubblePositions) {
			const distance = Math.sqrt(
				Math.pow(x - pos.x, 2) + Math.pow(y - pos.y, 2)
			);
			const minDistance = (size + pos.size) / 100; // 转换为百分比距离

			if (distance < minDistance) {
				overlapping = true;
				break;
			}
		}

		if (!overlapping) {
			return { x, y };
		}

		attempts++;
	}

	// 如果找不到不重叠的位置，返回随机位置
	return {
		x: Math.random() * 80 + 10,
		y: Math.random() * 80 + 10
	};
}

/**
 * 处理气泡点击事件
 */
function handleBubbleClick(event) {
	const bubble = event.target;

	// 创建涟漪效果
	createRippleEffect(event.clientX, event.clientY);

	// 添加弹出动画
	bubble.classList.add('popped');

	// 动画结束后移除气泡
	setTimeout(() => {
		if (bubble.parentNode) {
			// 从位置数组中移除
			const index = Array.from(bubblesContainer.children).indexOf(bubble);
			if (index > -1) {
				bubblePositions.splice(index, 1);
			}

			bubble.remove();

			// 可选：创建新的气泡替代
			setTimeout(() => createBubble(), 500);
		}
	}, 500);

	// 阻止事件冒泡
	event.stopPropagation();
}

/**
 * 创建涟漪效果
 */
function createRippleEffect(x, y) {
	const ripple = document.createElement('div');
	ripple.classList.add('ripple');
	ripple.style.left = `${x}px`;
	ripple.style.top = `${y}px`;

	document.body.appendChild(ripple);

	// 动画结束后移除涟漪元素
	setTimeout(() => {
		ripple.remove();
	}, 600);
}

/**
 * 创建气泡效果
 */
function createBubbles() {
	// 清空气泡位置数组
	bubblePositions = [];

	// 计算气泡数量，基于窗口大小
	const bubbleCount = Math.min(30, Math.floor(window.innerWidth * window.innerHeight / 4000));

	// 创建气泡
	for (let i = 0; i < bubbleCount; i++) {
		createBubble();
	}
}

/**
 * 清除所有气泡
 */
function clearBubbles() {
	while (bubblesContainer.firstChild) {
		bubblesContainer.removeChild(bubblesContainer.firstChild);
	}
	bubblePositions = [];
}

/**
 * 添加单个气泡
 */
function addBubble() {
	createBubble();
}

// 页面加载完成后创建气泡
window.addEventListener('load', createBubbles);

// 窗口大小改变时重新创建气泡（使用防抖优化）
window.addEventListener('resize', debounce(function () {
	clearBubbles();
	createBubbles();
}, 250));

// 添加按钮事件监听
addBubbleBtn.addEventListener('click', addBubble);
clearBubblesBtn.addEventListener('click', clearBubbles);

// 点击空白处添加气泡
document.addEventListener('click', function (event) {
	if (event.target === document.body || event.target === bubblesContainer) {
		createRippleEffect(event.clientX, event.clientY);
		addBubble();
	}
});
